<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>北京积木纵横后台管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="__SKIN__/js/layui/css/layui.css" media="all">
    <!--JS引用-->
    <script src="__SKIN__/js/jquery/jquery-3.3.1.js"></script>
    <script src="__SKIN__/js/layui/xm-select.js"></script>
    <!--CSS引用-->
</head>
<body>
<div class="layui">
        <div id="edit" >
            <form style="width:90%;margin-left:5%;" class="layui-form layui-form-pane" lay-filter="editform" id="editform"></form>
        </div>
</div>
<script src="__SKIN__/workflow/js/form_assembly.js" charset="utf-8"></script>
<script src="__SKIN__/js/layui/layui.js" charset="utf-8"></script>
<script>
    var  add_config = [];
    //同步ajax请求数据转出
    var ajax = function(url,data){
        var arr = {};
        $.ajax({
            url:url,
            type:'post',
            data:data,
            dataType:"html",
            async: false,//关闭异步
            success:function(e){
                arr = eval('(' + e + ')');
            }
        });
        return arr;
    }

    layui.use(['table','form','layer','upload','element'], function(){
        var $ = layui.$
            ,table = layui.table
            ,upload = layui.upload
            ,form = layui.form;

        /************************************监听提交（发起流程表单）***************************/
        form.on('submit(editform)', function(data){
            let urlss = "{:url('Workflowajax/edit_workflow')}";
            let res = ajax(urlss,JSON.stringify(data.field));
             table.reload('workflow');
             var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
             parent.layer.close(index); //再执行关闭
            return false;
        });

        //弹窗表单
        var active = {
            editform:function(e){
                var that = this;
                //多窗口模式，层叠置顶
                _this = layer.open({
                    type: 2//此处以iframe举例
                    ,title: '审核流程'
                    ,area: ['800px', '600px']
                    ,shade: 0.3
                    ,shadeClose:true
                    ,maxmin: true
                    ,offset: 'auto'
                    // ,content: $("#edit")
                    ,content: "{:url('Approvalstart/edit_workflow')}"
                    ,btn: ['关闭']
                    ,btn1: function(index, layero){
                        layer.close(index);
                        return false;
                    },
                    cancel: function(layero,index){
                        layer.closeAll();
                    }
                });
                layer.full(_this); //窗口直接顶天立地
            },

        };
        //弹窗表单按钮控制器
        $('#extra .layui-btn').on('click', function(){
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });
        /************************************多文件列表示例*********************************/
        var demoListView = function(){
            let object = $('#uploads'),uploadListIns = upload.render({
                elem: '#testList'
                ,url: "{:url('Workflowajax/layui_upload')}" //改成您自己的上传接口
                ,accept: 'file'
                ,multiple: true
                ,auto: false
                ,bindAction: '#testListAction'
                ,choose: function(obj){
                    var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                    //读取本地文件
                    obj.preview(function(index, file, result){
                        var tr = $(['<tr id="upload-'+ index +'">'
                            ,'<td>'+ file.name +'</td>'
                            ,'<td>'+ (file.size/1024).toFixed(1) +'kb</td>'
                            ,'<td>等待上传</td>'
                            ,'<td>'
                            ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                            ,'</td>'
                            ,'</tr>'].join(''));
                        //单个重传
                        tr.find('.demo-reload').on('click', function(){
                            obj.upload(index, file);
                        });

                        //删除
                        tr.find('.demo-delete').on('click', function(){
                            delete files[index]; //删除对应的文件
                            tr.remove();
                            uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                        });

                        object.append(tr);
                    });
                }
                ,done: function(res, index, upload){
                    if(res.code==1){ //上传成功
                        var tr = object.find('tr#upload-'+ index)
                            ,tds = tr.children();
                        tds.eq(1).append('<input type="hidden" name="file_ids'+res.data.file_id+'" value="'+res.data.file_id+'">');
                        tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                        tds.eq(3).html(''); //清空操作
                        //回写文件ID

                        return delete this.files[index]; //删除文件队列已经上传成功的文件
                    }
                    this.error(index, upload);
                }
                ,error: function(index, upload){
                    var tr = object.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                    tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                }
            });
        };
        layer.ready(function(){
            var e = top.workflow;
            let url = "{:url('Workflowajax/get_workflow_default')}";
            let data = ajax(url,{'worlflow_id':e.id});
            let html = loadflow(data.data,'edit');
            $('#editform').html(html);

            if(data.data.downlist != undefined){
                downlist(data.data.downlist,'edit');
                table.reload('down_list');
            }
            if(data.data.msg.is_upload==1) {
                demoListView();
            }
            upload.render();
            layui.form.render();
            let form_data = data.data.form_data;
            form.val('editform',
                form_data
            );
        });
    });
    /**************************layui实例化结束*************************/
    var downlist = function(e,type){
        if(type == 'examine'){
            layui.table.render({
                elem: '#down_list'
                ,auto: false
                , cols:[[
                    {field: 'id', title: 'id',cellMinWidth:80,  sort: true}
                    , {field: 'name', title: '文件名', sort: true}
                    , {field: 'username', title: '归属人', }
                    , {field: 'format', title: '文件类型', }
                    , {field: 'folder', title: '所在目录',  sort: true}
                    , {fixed: 'right',title:'操作',toolbar: '#down', fixed:'right'}
                ]]
                ,data:e
            });
        }else if(type == 'edit'){
            layui.table.render({
                elem: '#down_list'
                ,auto: false
                , cols:[[
                    {field: 'id', title: 'id',cellMinWidth:100,  sort: true, templet:function(i){
                            return i.id+'<input type="hidden" name="file_id[]" value="'+i.id+'"></input>';
                        }}
                    , {field: 'name', title: '文件名', sort: true}
                    , {field: 'username', title: '归属人', }
                    , {field: 'format', title: '文件类型', }
                    , {field: 'folder', title: '所在目录',  sort: true}
                    , {fixed: 'right',title:'操作',toolbar: '#downs',fixed:'right'}
                ]]
                ,data:e
            });
        }
    }

    /***************************初始化表单方法**************************/
    var loadflow = function(res,type){
        var html = '';
        html+=loadhead(res.msg,type);
        html += loadline('审核表单');
        $.each(res.data,function(f,n){

            switch (n.field_type) {
                case 1:
                    html += loadtext(n);
                    break;
                case 2:
                    html += loadselect(n);
                    break;
                case 3:
                    html += loadradio(n);
                    break;
                case 4:
                    html += loadcheckbox(n);
                    break;
            }
        });
        //判断允许更改审核结构（审核人员，角色，部门）
        if(res.downlist !== undefined)
        {
            if (res.downlist.length > 0) {
                html += loadline('附件下载');
                html += down_list();
            }
        }

        if(res.msg.is_upload==1){
            html += loadline('附件上传');
            html += uploads();
        }

        if(res.msg.is_comment==1){
            html += loadline('留言评论');
            html += conmment();
        }

        html += loadline();
        html += loadbutton(res.process,type);

        return html;
    }
</script>

</body>
</html>